import { Skeleton, Card } from 'antd'

// 产品卡片骨架屏
export const ProductCardSkeleton = ({ count = 6 }) => {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array.from({ length: count }).map((_, index) => (
                <Card key={index} className="h-80">
                    <Skeleton.Image
                        active
                        className="w-full h-48 mb-4"
                        style={{ width: '100%', height: '192px' }}
                    />
                    <Skeleton active paragraph={{ rows: 2 }} />
                </Card>
            ))}
        </div>
    )
}

// 产品详情页骨架屏
export const ProductDetailSkeleton = () => {
    return (
        <div className="max-w-4xl mx-auto p-6">
            <div className="mb-6">
                <Skeleton.Button active size="small" className="mb-4" />
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* 左侧图片区域 */}
                <div>
                    <Skeleton.Image
                        active
                        className="w-full h-80 mb-4"
                        style={{ width: '100%', height: '320px' }}
                    />
                </div>

                {/* 右侧信息区域 */}
                <div>
                    <Skeleton active title={{ width: '60%' }} paragraph={{ rows: 4 }} />
                    <div className="mt-6 space-y-3">
                        <Skeleton.Button active size="large" block />
                        <Skeleton.Button active size="large" block />
                    </div>
                </div>
            </div>

            {/* 详细描述 */}
            <div className="mt-8">
                <Skeleton active title={{ width: '30%' }} paragraph={{ rows: 6 }} />
            </div>
        </div>
    )
}

// 表单骨架屏
export const FormSkeleton = () => {
    return (
        <div className="max-w-2xl mx-auto p-6">
            <Skeleton active title={{ width: '40%' }} paragraph={false} className="mb-6" />

            <div className="space-y-6">
                {/* 表单字段 */}
                {Array.from({ length: 5 }).map((_, index) => (
                    <div key={index}>
                        <Skeleton.Button active size="small" className="mb-2" />
                        <Skeleton.Input active size="large" />
                    </div>
                ))}

                {/* 文件上传区域 */}
                <div>
                    <Skeleton.Button active size="small" className="mb-2" />
                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-8">
                        <Skeleton active paragraph={{ rows: 2 }} />
                    </div>
                </div>

                {/* 提交按钮 */}
                <div className="flex justify-end space-x-4 mt-8">
                    <Skeleton.Button active size="large" />
                    <Skeleton.Button active size="large" />
                </div>
            </div>
        </div>
    )
}

// 列表骨架屏
export const ListSkeleton = ({ rows = 5 }) => {
    return (
        <div className="space-y-4">
            {Array.from({ length: rows }).map((_, index) => (
                <Card key={index} className="p-4">
                    <div className="flex items-center space-x-4">
                        <Skeleton.Avatar active size="large" />
                        <div className="flex-1">
                            <Skeleton active paragraph={{ rows: 1 }} />
                        </div>
                        <Skeleton.Button active />
                    </div>
                </Card>
            ))}
        </div>
    )
}

// 通用页面骨架屏
export const PageSkeleton = () => {
    return (
        <div className="p-8">
            <div className="max-w-6xl mx-auto">
                {/* 页面标题 */}
                <div className="text-center mb-8">
                    <Skeleton active title={{ width: '50%' }} paragraph={{ rows: 1 }} />
                </div>

                {/* 搜索栏 */}
                <div className="mb-8 flex justify-center">
                    <div className="w-full max-w-md">
                        <Skeleton.Input active size="large" />
                    </div>
                </div>

                {/* 内容区域 */}
                <ProductCardSkeleton count={6} />
            </div>
        </div>
    )
}